<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>阿姨入驻</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'PingFang SC', sans-serif;
            background-color: #f5f7fa;
        }
        .step-active {
            color: #3b82f6;
            border-color: #3b82f6;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .required {
            color: #ef4444;
        }
    </style>
</head>
<body class="max-w-md mx-auto">
    <!-- 顶部导航 -->
    <header class="bg-white py-4 px-6 shadow-sm">
        <div class="flex items-center">
            <a href="#" onclick="window.history.back()" class="text-gray-600">
                <i class="fas fa-chevron-left text-lg"></i>
            </a>
            <h1 class="text-xl font-semibold text-center flex-1">阿姨入驻</h1>
        </div>
    </header>

    <!-- 步骤条 -->
    <div class="bg-white p-6 mt-4">
        <div class="flex justify-between relative">
            <div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-200 -translate-y-1/2 z-0"></div>
            <div class="absolute top-1/2 left-0 w-1/4 h-1 bg-blue-500 -translate-y-1/2 z-10"></div>
            
            <div class="flex flex-col items-center relative z-20">
                <div class="w-10 h-10 rounded-full border-2 border-blue-500 bg-white flex items-center justify-center step-active">1</div>
                <span class="mt-2 text-sm step-active">基本信息</span>
            </div>
            
            <div class="flex flex-col items-center relative z-20">
                <div class="w-10 h-10 rounded-full border-2 border-gray-300 bg-white flex items-center justify-center">2</div>
                <span class="mt-2 text-sm text-gray-500">上传资质</span>
            </div>
            
            <div class="flex flex-col items-center relative z-20">
                <div class="w-10 h-10 rounded-full border-2 border-gray-300 bg-white flex items-center justify-center">3</div>
                <span class="mt-2 text-sm text-gray-500">提交审核</span>
            </div>
            
            <div class="flex flex-col items-center relative z-20">
                <div class="w-10 h-10 rounded-full border-2 border-gray-300 bg-white flex items-center justify-center">4</div>
                <span class="mt-2 text-sm text-gray-500">审核通过</span>
            </div>
        </div>
    </div>

    <!-- 表单区域 -->
    <form class="bg-white p-6 mt-4">
        <div class="form-group">
            <label class="block text-gray-700 mb-2">姓名 <span class="required">*</span></label>
            <input type="text" class="w-full px-4 py-2 border-b border-gray-300 focus:border-blue-500 outline-none">
        </div>
        
        <div class="form-group">
            <label class="block text-gray-700 mb-2">手机号码 <span class="required">*</span></label>
            <div class="flex">
                <input type="tel" class="flex-1 px-4 py-2 border-b border-gray-300 focus:border-blue-500 outline-none" placeholder="请输入手机号">
                <button type="button" class="ml-2 px-4 py-2 bg-blue-500 text-white rounded">获取验证码</button>
            </div>
        </div>
        
        <div class="form-group">
            <label class="block text-gray-700 mb-2">服务类型 <span class="required">*</span></label>
            <div class="flex flex-wrap gap-2">
                <label class="px-4 py-2 border border-gray-300 rounded-full cursor-pointer">
                    <input type="checkbox" class="mr-2">家政服务
                </label>
                <label class="px-4 py-2 border border-gray-300 rounded-full cursor-pointer">
                    <input type="checkbox" class="mr-2">康养护理
                </label>
                <label class="px-4 py-2 border border-gray-300 rounded-full cursor-pointer">
                    <input type="checkbox" class="mr-2">钟点工
                </label>
            </div>
        </div>
        
        <div class="form-group">
            <label class="block text-gray-700 mb-2">工作经验 <span class="required">*</span></label>
            <select class="w-full px-4 py-2 border-b border-gray-300 focus:border-blue-500 outline-none">
                <option>请选择工作经验</option>
                <option>1年以内</option>
                <option>1-3年</option>
                <option>3-5年</option>
                <option>5年以上</option>
            </select>
        </div>
    </form>

    <!-- 底部按钮 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white p-4 shadow-md max-w-md mx-auto">
        <a href="resume.html" class="block w-full py-3 bg-blue-500 text-white text-center rounded-lg font-medium">
            下一步
        </a>
    </div>
</body>
</html>